<template>
  <div>
    <my-header></my-header>
    <h2>我是Index</h2>
    <ul>
      <li v-for="item of list" :key="item.id">
        <time v-text="item.createTime"></time>
        <router-link :to="'/content/' + item.id">
          {{item.title}}
        </router-link>
      </li>
    </ul>
    <my-footer></my-footer>
  </div>
</template>

<script>
import MyHeader from '@/components/MyHeader'
import MyFooter from '@/components/MyFooter'

export default {
  name: 'Index',
  components: {
    MyHeader,
    MyFooter
  },
  data () {
    return {
      list: []
    }
  },
  methods: {
    getData () {
      var data = []
      var num = 1
      for (var i = 0; i < 20; i++) {
        num += i
        var obj = {
          'id': num,
          'title': '今天天气不错! ' + num,
          'createTime': new Date()
        }
        data.push(obj)
      }
      this.list = data
    }
  },
  created () {
    this.getData()
  }
}
</script>

<style scoped>
</style>
